<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>表单</title>
		<link rel="stylesheet" href="css/weui.css" />
		<link rel="stylesheet" href="css/example.css" />
	</head>

	<body>
		<div class="page">
			<div class="hd">
				<h1 class="page_title">Cell</h1>
			</div>
			<div class="bd">
				<div class="weui_cells_title">带说明的列表项</div>
				<div class="weui_cells">
					<div class="weui_cell">
						<div class="weui_cell_bd weui_cell_primary">
							<p>标题文字</p>
						</div>
						<div class="weui_cell_ft">说明文字</div>
					</div>
				</div>
				<div class="weui_cells_title">带图标、说明的列表项</div>
				<div class="weui_cells">
					<div class="weui_cell">
						<div class="weui_cell_hd"><img src=""
							alt="" style="width:20px;margin-right:5px;display:block"></div>
						<div class="weui_cell_bd weui_cell_primary">
							<p>标题文字</p>
						</div>
						<div class="weui_cell_ft">说明文字</div>
					</div>
					<div class="weui_cell">
						<div class="weui_cell_hd"><img src=""
							alt="" style="width:20px;margin-right:5px;display:block"></div>
						<div class="weui_cell_bd weui_cell_primary">
							<p>标题文字</p>
						</div>
						<div class="weui_cell_ft">说明文字</div>
					</div>
				</div>

				<div class="weui_cells_title">带跳转的列表项</div>
				<div class="weui_cells weui_cells_access">
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">
						</div>
					</a>
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">
						</div>
					</a>
				</div>

				<div class="weui_cells_title">带说明、跳转的列表项</div>
				<div class="weui_cells weui_cells_access">
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">说明文字</div>
					</a>
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">说明文字</div>
					</a>

				</div>

				<div class="weui_cells_title">带图标、说明、跳转的列表项</div>
				<div class="weui_cells weui_cells_access">

					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_hd"><img src=""
							alt="" style="width:20px;margin-right:5px;display:block"></div>
						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">说明文字</div>
					</a>
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_hd"><img src=""
							alt="" style="width:20px;margin-right:5px;display:block"></div>
						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">说明文字</div>
					</a>
				</div>

				<div class="weui_cells_title">单选列表项</div>
				<div class="weui_cells weui_cells_radio">
					<label class="weui_cell weui_check_label" for="x11">
						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">
							<input type="radio" class="weui_check" name="radio1" id="x11">
							<span class="weui_icon_checked"></span>
						</div>
					</label>
					<label class="weui_cell weui_check_label" for="x12">

						<div class="weui_cell_bd weui_cell_primary">
							<p>cell standard</p>
						</div>
						<div class="weui_cell_ft">
							<input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">
							<span class="weui_icon_checked"></span>
						</div>
					</label>
				</div>
				<div class="weui_cells_title">复选列表项</div>
				<div class="weui_cells weui_cells_checkbox">
					<label class="weui_cell weui_check_label" for="s11">
						<div class="weui_cell_hd">
							<input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">
							<i class="weui_icon_checked"></i>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<p>standard is dealt for u.</p>
						</div>
					</label>
					<label class="weui_cell weui_check_label" for="s12">
						<div class="weui_cell_hd">
							<input type="checkbox" name="checkbox1" class="weui_check" id="s12">
							<i class="weui_icon_checked"></i>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<p>standard is dealicient for u.</p>
						</div>
					</label>
				</div>

				<div class="weui_cells_title">开关</div>
				<div class="weui_cells weui_cells_form">
					<div class="weui_cell weui_cell_switch">
						<div class="weui_cell_hd weui_cell_primary">标题文字</div>
						<div class="weui_cell_ft">
							<input class="weui_switch" type="checkbox" />
						</div>
					</div>
				</div>

				<div class="weui_cells_title">表单</div>
				<div class="weui_cells weui_cells_form">
					<div class="weui_cell">
						<div class="weui_cell_hd">
							<label class="weui_label">qq</label>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="tel" placeholder="请输入qq号" />
						</div>
					</div>
					<div class="weui_cell weui_vcode">
						<div class="weui_cell_hd">
							<label class="weui_label">验证码</label>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="number" placeholder="请输入验证码" />
						</div>
						<div class="weui_cell_ft">
							<img src="./img/vcode.jpg" />
						</div>
					</div>
					<div class="weui_cell">
						<div class="weui_cell_hd">
							<label class="weui_label">银行卡</label>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="tel" placeholder="请输入银行卡号" />
						</div>
					</div>
					<div class="weui_cell weui_vcode weui_cell_warn">
						<div class="weui_cell_hd">
							<label class="weui_label">验证码</label>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="number" placeholder="请输入验证码" />
						</div>
						<div class="weui_cell_ft">
							<i class="weui_icon_warn"></i>
							<img src="./img/vcode.jpg" />
						</div>
					</div>
				</div>
				<div class="weui_cells_tips">底部说明文字底部说明文字</div>
				<div class="weui_btn_area">
					<a class="weui_btn weui_btn_primary" href="javascript:" id="showTooltips">确定</a>
				</div>
				<div class="weui_cells_title">文本域</div>
				<div class="weui_cells weui_cells_form">
					<div class="weui_cell">
						<div class="weui_cell_bd weui_cell_primary">
							<textarea class="weui_textarea" placeholder="请输入评论" rows="3"></textarea>
							<div class="weui_textarea_counter"><span>0</span>/200</div>
						</div>
					</div>
				</div>
				<div class="weui_toptips weui_warn js_tooltips">格式不对</div>
				<div class="weui_cells_title">表单报错</div>
				<div class="weui_cells weui_cells_form">
					<div class="weui_cell weui_cell_warn">
						<div class="weui_cell_hd">
							<label for="" class="weui_label">卡号</label>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="tel" value="weui input error" placeholder="请输入卡号" />
						</div>
						<div class="weui_cell_ft">
							<i class="weui_icon_warn"></i>
						</div>
					</div>
					<div class="weui_cell">
						<div class="weui_cell_hd">
							<label for="" class="weui_label">日期</label>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="date" value="" />
						</div>
					</div>
					<div class="weui_cell">
						<div class="weui_cell_hd">
							<label for="" class="weui_label">时间</label>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="datetime-local" value="" placeholder="" />
						</div>
					</div>
				</div>
				<div class="weui_cells_title">选择</div>
				<div class="weui_cells">

					<div class="weui_cell weui_cell_select weui_select_before">
						<div class="weui_cell_hd">
							<select class="weui_select" name="select2">
								<option value="1">+86</option>
								<option value="2">+80</option>
								<option value="3">+84</option>
								<option value="4">+87</option>
							</select>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<input class="weui_input" type="tel" placeholder="请输入号码" />
						</div>
					</div>
				</div>
				<div class="weui_cells_title">选择</div>
				<div class="weui_cells">
					<div class="weui_cell weui_cell_select">
						<div class="weui_cell_bd weui_cell_primary">
							<select class="weui_select" name="select1">
								<option selected="" value="1">微信号</option>
								<option value="2">QQ号</option>
								<option value="3">Email</option>
							</select>
						</div>
					</div>
					<div class="weui_cell weui_cell_select weui_select_after">
						<div class="weui_cell_hd">
							国家/地区
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<select class="weui_select" name="select2">
								<option value="1">中国</option>
								<option value="2">美国</option>
								<option value="3">英国</option>
							</select>
						</div>
					</div>
				</div>

			</div>
		</div>
	</body>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#showTooltips').on('click', function(e) {
				var $tooltips = $('.js_tooltips');
				if ($tooltips.css('display') != 'none') {
					return;
				}
				// 如果有`animation`, `position: fixed`不生效
				$('.page.cell').removeClass('slideIn');
				$tooltips.show();
				setTimeout(function() {
					$tooltips.hide();
				}, 2000);
			})
		})
	</script>

</html>